<template>
  <div id="wrapper">
    <el-card class="box-card">
      
      <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
        <el-col :xs="4" :sm="4" :lg="4" style="float: right;margin-top: -28px;">
          <el-tooltip placement="top" >
            <div slot="content">
              操作指南
            </div>
            <div class="icon-item" >
              <a href="https://thundersoft.feishu.cn/docs/doccnG6tNHDD4oeUoyX0BIaLXrc" target="_blank">
                <img :src="logo">
              </a>
            </div>
          </el-tooltip>
      </el-col>
      </el-row>
      <el-row class="bgColor">
        <el-col :xs="24" :sm="12" :lg="12" style="margin-left: 23px;">
          <el-radio v-model="radio" :label="1" style="width: 100%">
              选择项目：
              <el-cascader
                style="width: 55%"
                :disabled="radio != 1"
                v-model="selectedTec1"
                collapse-tags
                :props="props"
                :options="ProjectList"
                filterable
                @change="changeProject($event)"
                clearable></el-cascader>
              <!-- <el-select :disabled="radio != 1" style="width:65%" v-model="selectedDep" placeholder="请选择" @change="changeSelect">
                <el-option
                  v-for="(v,i) in departmentFilterData"
                  :key="i"
                  :label="v.name"
                  :value="v.id">
                </el-option>
              </el-select> -->
          </el-radio>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6" class="col-box">
          <el-radio v-model="radio" :label="2" style="width: 100%">
              技术领域：
              <el-cascader
                style="width: 55%"
                :disabled="radio != 2"
                v-model="selectedTec1"
                :props="{ checkStrictly: true }"
                :options="singleFilterData"
                @change="changeSelect"
                clearable></el-cascader>
          </el-radio>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6" class="col-box">
          <el-radio v-model="radio" :label="3" style="width: 100%">
              自定义：
              <el-cascader
                style="width: 65%"
                v-model="selectedTec2"
                :disabled="radio != 3"
                :props="{ checkStrictly: true }"
                :options="singleCustomData"
                @change="changeSelect"
                clearable></el-cascader>
          </el-radio>         
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6" class="col-box" style="margin-left: 1px;">
          <span class="col-span">关键字：</span>
          <el-input v-model="keywords" style="width: 70%" placeholder="查询关键字,项目名称或立项事业部" @change="changeKeywords"></el-input>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6" class="col-box">
          <span class="col-span">需求状态：</span>
          <el-select style="width:65%" v-model="needStatus" multiple placeholder="请选择" clearable @change="changeNeedStatus">
            <el-option
              v-for="item in needStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-table class="marT" ref="outerTable" :data="tableData" :header-cell-style="{background:'#eef1f6'}" style="width:100%;" v-loading="loading" @expand-change="getChildList">
        <el-table-column type="expand">
          <template slot-scope="expands">
            <el-table
              :id="'innerTable'+expands.row.id"
              :data="expands.row.childData"
              :cell-class-name="addClass"
              border
              style="width: 90%">
              <el-table-column property="site_power.technical_field.name" label="技术领域" align="center" fixed="left" width="250">
                <template slot-scope="scope">
                  <el-tooltip placement="top" effect="light" v-if="scope.row.site_power.technical_field">
                    <div slot="content"><span v-if="scope.row.site_power.technical_field.parent_display">{{ scope.row.site_power.technical_field.parent_display }}/</span>
                  {{ scope.row.site_power.technical_field.name }}</div>
                    <el-tag type="primary">{{scope.row.site_power.technical_field.name.length > 20 ? scope.row.site_power.technical_field.name.substring(0,19)+'...':scope.row.site_power.technical_field.name}}
                  </el-tag>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column align="center" v-for="(v,i) in expands.row.childData[0].site_power.week_range" :key="i" :property="v" :label="week2date(v)" width="120">
                <template slot-scope="scope">  
                  <div class="borders">需求：{{ scope.row.result.need[v].number.toFixed(2) }}</div>
                  <div class="hover-div">
                    <el-tooltip placement="right" v-if="scope.row.result.total[v].children && scope.row.result.total[v].children.length" effect="light">
                      <div slot="content">  
                        <span v-for="(val,ind) in scope.row.result.total[v].children" :key="ind">{{ val.employee.dept }} - {{ val.employee.name }}（{{val.spend}}）<br/></span></div>
                        <span>已分配：{{ scope.row.result.total[v].number.toFixed(2) }}</span>
                    </el-tooltip>
                    <span v-else>已分配：{{ scope.row.result.total[v].number.toFixed(2) }}</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column align="center" property="project_workflow_json.project_name" label="项目名称"></el-table-column>
        <el-table-column align="center" property="project_workflow_json.dept" label="立项事业部"></el-table-column>
        <el-table-column align="center" property="project_workflow_json.project_manager" label="项目经理"></el-table-column>
        <el-table-column align="center" property="project_workflow_json.customer" label="客户"></el-table-column>
        <el-table-column align="center" property="project_workflow_json.status_show" label="立项状态" width="100"></el-table-column>
        <el-table-column align="center" property="project_workflow_json.demand_type" label="需求类型"></el-table-column>
        <el-table-column align="center" property="dept.name" label="需求目标"></el-table-column>
        <!-- <el-table-column align="center" property="role" label="角色"></el-table-column> -->
        <el-table-column align="center" property="technical_field.name" label="技术领域" width='180'>
          <template slot-scope="scope">
            <el-tooltip placement="top" effect="light" v-if="scope.row.technical_field">
               <div slot="content"><span v-if="scope.row.technical_field.parent_display">{{ scope.row.technical_field.parent_display }}</span>
                  {{ scope.row.technical_field.name }}</div>
              <el-tag type="primary">{{scope.row.technical_field.name.length > 15 ? scope.row.technical_field.name.substring(0,14)+'...':scope.row.technical_field.name}}
            </el-tag>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" label="需求总人周/匹配总人周" width="120">
           <template slot-scope="scope">
             {{scope.row.need_total_person_weeks+"/"+scope.row.get_total_person_weeks}}
           </template>
        </el-table-column>
        <!-- <el-table-column align="center" property="get_total_person_weeks" label="匹配总人周"></el-table-column> -->
        
        <el-table-column align="center" label="需求状态" width="120">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.get_total_person_weeks == scope.row.need_total_person_weeks" type="success">已确定</el-tag>
                <el-tag v-if="scope.row.get_total_person_weeks < scope.row.need_total_person_weeks" type="warning">未确定</el-tag>
                <el-tag v-if="scope.row.get_total_person_weeks > scope.row.need_total_person_weeks" type="danger">超额分配</el-tag>
            </template>
        </el-table-column>
        <el-table-column align="center" property="project_workflow_json.rate" label="需求满足占比">
            <template slot-scope="scope">
              <span v-if="scope.row.need_total_person_weeks != 0">
                <span>{{(scope.row.get_total_person_weeks / scope.row.need_total_person_weeks) | num45Filter}}%</span>
              </span>
              <span v-else>
                <span>0%</span> 
              </span>
            </template>
        </el-table-column>
        <!-- <el-table-column align="center" property="create_name" label="更新人员"></el-table-column> -->
        <el-table-column align="center" label="更新人员/时间" width='100'>
            <template slot-scope="scope">
              <div v-if="scope.row.create_name">
                {{scope.row.create_name}}
              </div>
              <div v-if="scope.row.update_time_show">
                {{scope.row.update_time_show}}
              </div>  
            </template>
        </el-table-column>
        <!-- <el-table-column align="center" property="source_update_name" label="分配人员"></el-table-column>
        <el-table-column align="center" property="source_update_time_show" label="分配时间" width='100'>
            <template slot-scope="scope">
                {{scope.row.source_update_time_show}}
            </template>
        </el-table-column> -->
        <el-table-column align="center" label="操作" fixed="right" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="toTalent(scope.row.id)">
              资源分配
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-show="tableTotal > 10" background layout="prev, pager, next" :page-size="tableSize" @size-change="tableSizeChange" @current-change="tableCurrentChange" :current-page="tableCurrent" style="text-align: center;margin-top: 20px" :total="tableTotal">
      </el-pagination>
      <el-card shadow="never" style="margin-top: 50px">
        <div slot="header" class="clearfix">
          <span>资源GAP</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="flashData">刷新</el-button>
        </div>     
        <el-row style="margin-bottom: 20px">
          <el-col :xs="24" :sm="24" :lg="16">
            <el-select style="width: 80%" v-if="radio == 2 || radio == 3" v-model="selectedDep" placeholder="请选择" @change="tabClick">
              <el-option
                v-for="(v,i) in departmentFilterData"
                :key="i"
                :label="v.name"
                :value="v.id">
              </el-option>
            </el-select>
            <template v-if="radio == 1">
                <el-radio v-model="techRadio" :label="1" style="width:45%">
                    技术领域：
                    <el-cascader
                      style="width: 70%"
                      :disabled="techRadio == 2"
                      v-model="selectedTec1"
                      :props="{ checkStrictly: true }"
                      :options="singleFilterData"
                        @change="tabClick"
                      clearable></el-cascader>
                </el-radio>
                <el-radio v-model="techRadio" :label="2" style="width:45%">
                    自定义：
                    <el-cascader
                      style="width: 70%"
                      v-model="selectedTec2"
                      :disabled="techRadio == 1"
                      :props="{ checkStrictly: true }"
                      :options="singleCustomData"
                        @change="tabClick"
                      clearable></el-cascader>
                </el-radio>         
                <!-- <el-col :xs="24" :sm="12" :lg="6" style="margin-top:10px"> -->
                  <el-radio v-model="radio" :label="1" style="margin-top:10px;width:45%">
                      部门：
                      <el-select :disabled="radio != 1" style="width:70%" v-model="selectedDep" placeholder="请选择" @change="changeSelectDept">
                        <el-option
                          v-for="(v,i) in departmentFilterData"
                          :key="i"
                          :label="v.name"
                          :value="v.id">
                        </el-option>
                      </el-select>
                  </el-radio>
                
            <span style="margin-top:10px;width:45%">时间段：</span>
            <el-date-picker
              v-model="year"
              @change="changeYear"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
           
                <!-- </el-col> -->
            </template>
          </el-col>
          
        </el-row>
        <el-table ref="gapTable" :data="gapData" :border="true" :header-cell-style="{background:'#eef1f6'}" v-loading="loading1">
          <el-table-column align="center" fixed="left" property="type" label="分类" width="200">
            <template slot-scope="scope">
                <span v-if="scope.row.type == 'have'">可用资源(供)</span>
                <span v-if="scope.row.type == 'need'">需求人数(需)</span>
                <span v-if="scope.row.type == 'gap'">整体缺口(正-富余，负-缺口)</span>
            </template>
          </el-table-column>
        
          <el-table-column align="center" v-for="(v,i) in weekList" :key="i" :property="v" :label="week2date(v)" width="120">
              <template slot-scope="scope">
                <span v-if="scope.row.type == 'gap'">
                    <span v-if="scope.row[v] == '-'">{{scope.row[v]}}</span>
                    <template v-else>
                      <span v-if="scope.row[v] < 0" style="color: red">{{scope.row[v]}}</span>
                      <span v-if="scope.row[v] > 0" style="color: #4dec4d">{{scope.row[v]}}</span>
                      <span v-if="scope.row[v] == 0">{{scope.row[v]}}</span>
                    </template>
                </span>
                <span v-else>
                  <span>{{scope.row[v]}}</span>
                </span>
              </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-card>
  </div>
</template>
<script>
import { getHeaderName } from '@/app.config'
import http from '@/views/sys/axios'
import { mapState, mapMutations } from 'vuex'
import { Container, Loading } from 'element-ui'
import Moment from 'moment'
import { DateUtil } from './utils.js'

export default {
  data() {
    return {
      props: { multiple: true },
      needStatus:'',
      loading: false,
      loading1: false,
      BACKEND_API: process.env.VUE_APP_SOURSE_MANAGE_HOST,
      dialogVisible: false,
      dialogEditVisible: false,
      tableData: [],
      tableSize: 10,
      tableCurrent: 1,
      tableTotal: 15,
      itemFormData:{},
      calculated:{},
      departmentFilterData: [],
      radio: 1,
      selectedDep: '',
      selectedTec: [],
      selectedTec1: [],
      selectedTec2: [],
      singleFilterData: [],
      singleCustomData: [],
      startWeek: '',
      endWeek: '',
      weekList: [],
      gapData: [],
      expands: [],
      year: [],
      keywords: '',
      logo: require('../../assets/question.png'),
      techRadio: 1,
      needStatusList:[
        {
          value: '已确定',
          label: '已确定'
        }, {
          value: '未确定',
          label: '未确定'
        }, 
      ],
      needStatusParams:'',
      ProjectList:[],
      projectIds:'',
      projectDepts:''

    }
  },
  filters: {
    numFilter(value) {
      let tempVal = parseFloat(value || 0).toFixed(3);
      let realVal = tempVal.substring(0, tempVal.length - 1);
      return realVal;
    },
    num45Filter(value) { // 四舍五入
      let tempVal = Math.pow(10, 4);
      let tempVal1 = Math.pow(10, 2);
      return Math.round(value * tempVal) / tempVal1
    }
  },
  created() {
    this.defaultWeek()
  },
  mounted() {
    this.getProjectList()
    Promise.all([this.getDepartmentFilter(),this.getSingleFilter(),this.getCustomTech()]).then((res) => {
      this.departmentFilterData = res[0].data.data
      this.singleFilterData = res[1].data.data
      this.singleCustomData = res[2].data.data
      if(this.departmentFilterData[0]) {
        this.selectedDep = this.departmentFilterData[0].id
      }
      if(this.singleFilterData[0]) {
        this.selectedTec = [this.singleFilterData[0].value]
        this.selectedTec1 = [this.singleFilterData[0].value]
      }
      if(this.singleCustomData[0]) {
        this.selectedTec2 = [this.singleCustomData[0].value]
      }
      this.getPorjectList()
      this.getGapList(this.departmentFilterData[0].id,this.singleFilterData[0].value)
    })
  },
  methods: {
    changeProject(val){
      let projectIdsList = [] // 项目id
      let projectDeptList = [] // 部门id
      val.map(item=>{
        projectIdsList.push(item[1])
        projectDeptList.push(item[0])
      })
      
      this.projectIds = Array.from(new Set(projectIdsList)).toString()
      this.projectDepts = Array.from(new Set(projectDeptList)).toString()
      this.tableCurrent = 1
      this.getPorjectList()
    },
    getProjectList(){
      this.$axios({
        url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/project/demand_tree',
        method: "get",
        headers: getHeaderName(),
      }).then(res=>{
        this.ProjectList = res.data.data
      })
    },
    changeNeedStatus(val){
      this.needStatusParams = val.toString()
      this.tableCurrent = 1
      this.getPorjectList()
    },
    week2date(val) {
      let arr = val.split("-")
      let year = arr[0]
      let week = arr[1]

      let betDay = new Date(year+1+'-01-01 00:00:00').getTime() - new Date(year+'-01-01 00:00:00').getTime()
      let newD1 = new Date(year,0,1)
      let newD2 = new Date(year,11,31)
      
      let dayMS=24*60*60*1000
      let firstDay=firstDay=(7-newD1.getDay())*dayMS
      let weekMS=0
      if(newD1.getDay() < 4) {
         weekMS=(week-2)*7*dayMS
      } else {
        weekMS=(week-1)*7*dayMS
      }
      let result=newD1.getTime()+firstDay+weekMS+5*dayMS
      newD1.setTime(result)
      return val + '周\n(' + newD1.getFullYear() + "/" + (newD1.getMonth()+1) + "/" +newD1.getDate() + ')'
    },
    addClass({row,column,rowIndex,columnIndex}){
      if(column.property != 'site_power.technical_field.name' && column.property != '2020-26') {
        if(row.result.need[column.property].number != 0) {
          if(row.result.need[column.property].number == row.result.total[column.property].number){
            return 'cell-green';
          }
          if(row.result.need[column.property].number > row.result.total[column.property].number){
              return 'cell-yellow';
          }
          if(row.result.need[column.property].number < row.result.total[column.property].number){
              return 'cell-red';
          }
        } else {
          if(row.result.total[column.property].number > 0){
            return 'cell-red';
          } else {
            return 'cell-grey';
          }
        }
        
      } else {
        return ''
      }
    },
    defaultWeek() {
      let date = new Date()
      let y = date.getFullYear()
      let m = date.getMonth()
      let d = date.getDate()
      // console.log(y,m,d);
      let beginDate = new Date(y, m, d);
      let endDate = new Date(y, m+2, 31);
      this.weekList = DateUtil.estLabourWeek(beginDate,endDate)
      // this.year = y.toString()
    },
    getSingleFilter() {
      return new Promise((resolve, reject) => {
        this.$axios({
          url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/filter/technical_field/tree?filter=1',
          method: "get",
          headers: getHeaderName(),
        }).then(res => {
          resolve(res)
        }).catch(error => {
            reject(error)
        })
      })
      
    },
    getCustomTech() {
      return new Promise((resolve, reject) => {
        this.$axios({
          url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/filter/technical_field/tree?filter=1&type=custom',
          method: "get",
          headers: getHeaderName(),
        }).then(res => {
          resolve(res)
        }).catch(error => {
            reject(error)
        })
      })
      
    },
    getDepartmentFilter() {
      return new Promise((resolve, reject) => {
        this.$axios({
          url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/department/list',
          method: "get",
          headers: getHeaderName(),
          params: {
            type: 'own'
          }
        }).then(res => {
          resolve(res)
          
        }).catch(error => {
          reject(error)
        })
      })
    },
    changeKeywords() {
      this.tableCurrent = 1
      this.tableSize = 10
      this.getPorjectList()
    },
    getPorjectList(tech) {
      this.loading = true
      this.$axios({
        url: this.BACKEND_API + '/api/v1/project/demand/kanban',
        method: "get",
        headers: getHeaderName(),
        traditional: true,
        params:{
          "pageNo":this.tableCurrent,
          "pageSize":this.tableSize,
          "keywords": this.keywords,
          "tech": this.radio == 2 && tech ? tech : tech,
          "dept_id": this.radio == 1 ? this.selectedDep : '',
          "demand_status":this.needStatusParams,
          "project_id": this.projectIds,
          "dept_id": this.projectDepts
        }
      }).then(res => {
        if(res.data.status == 403) {
          this.$message.error('您无查看权限');
          this.$router.push({
              path: '/'
          })
        }
        if(res.data.code == 200 && res.data.status != 403) {
            this.loading = false
            res.data.data.data.map(item => {
              item.childData = []
            })
            this.tableData = res.data.data.data
            this.tableTotal = res.data.data.totalCount
        }
        
      })
    },
    getChildList(row, rowList) {
      if (rowList.length) { // 只展开一行//说明展开了
        this.expands = []
        let indexName = ''
        if (row) {
          this.expands.push(row.id)// 只展开当前行id
          this.$axios({
            url: `${this.BACKEND_API}/api/v1/project/demand/${row.id}/assign`,
            method: "get",
            headers: getHeaderName()
          }).then(res => {
            this.tableData.forEach((temp, index) => {
              // 找到当前点击的行，把动态获取到的数据赋值进去
              if (temp.id === row.id) {
                this.tableData[index].childData = [res.data.data]
                indexName = '#innerTable' + row.id
                // console.log('res',this.tableData[index].childData)
              }
            });
            if(res.data.data.index >= 0 && indexName) {
              $(indexName).find('.el-table__body-wrapper')[0].scrollLeft = parseInt(res.data.data.index) * 120
            }
            
          })
        }
        
      } else { // 说明收起了
        this.expands = []
      }
      
    },
    getGapList(dept_id,technical_field_id,year) {
      this.loading1 = true
      this.$axios({
        url: this.BACKEND_API + '/api/v1/gap',
        method: "get",
        headers: getHeaderName(),
        params:{
          technical_field_id: technical_field_id,
          dept_id: dept_id,
          week_range: this.weekList.join()
        }
      }).then(res => {
        this.loading1 = false
        this.gapData = res.data.data
       
      })
    },
    getFormDataByProjectNameEdit(project_name){
      this.$axios({
        url: this.BACKEND_API + '/api/v1/project/apply?project_name='+project_name,
        method: "get",
      }).then(res => {
        this.itemFormData = res.data.data.form
        this.calculated = res.data.data.calculated
      })
    },
    getFormDataByProjectNameDetails(project_name){
      this.$axios({
        url: this.BACKEND_API + '/api/v1/project/apply?project_name='+project_name,
        method: "get",
      }).then(res => {
        this.itemFormData = res.data.data.form
        this.calculated = res.data.data.calculated
        this.dialogVisible = true
      })
    },
    flashData() {
      this.loading1 = true
      this.$axios({
          url: `${process.env.VUE_APP_SOURSE_MANAGE_HOST}/api/v1/gap/refresh`,
          method: "post",
          headers: getHeaderName(),
          data: {
            dept_id: this.selectedDep
          }
      }).then(res => {
        this.loading1 = false
        if(res.data.code == 200) {
          this.$message.success(res.data.message)
        } else {
          this.$message.error(res.data.message)
        }
          
      })
    },
    toTalent(id){
      this.$router.push({ name: 'talentReview', params: { id: id } })
    },
    tableCurrentChange(val) {
      // console.log('999')
      this.tableCurrent = val
      let str = this.selectedTec[this.selectedTec.length - 1]
      this.getPorjectList(str)
    },
    tableSizeChange(val) {
      this.tableSize = val
      let str = this.selectedTec[this.selectedTec.length - 1]
      this.getPorjectList(str)
    },
    changeSelectDept(val){
      this.getGapList(val)
    },
    changeSelect(val) {
      this.tableCurrent = 1
      this.tableSize = 10
      if(this.radio == 1)  {
        let str = this.selectedTec[this.selectedTec.length - 1]
        this.getPorjectList(str)
        this.getGapList(val,str)
      }
      if(this.radio == 2 || this.radio == 3) { 
        this.selectedTec = val
        let str = val[val.length - 1]
        this.getPorjectList(str)
        this.getGapList(this.selectedDep,str)
      }
    },
    tabClick(val) {
      this.tableCurrent = 1
      this.tableSize = 10
      if(this.radio == 1) {
        this.selectedTec = val
        let str = val[val.length - 1]
        this.getGapList(this.selectedDep,str)
      }
      if(this.radio == 2 || this.radio == 3) {
        let str = this.selectedTec[this.selectedTec.length - 1]
        this.getGapList(val,str)
      }
      
    },
    changeYear(val) {
      let list = []
      if(val) {
        list = DateUtil.estLabourWeek(val[0],val[1])
      }
      this.weekList = list
      // console.log(val)
      // let beginDate = new Date(val, 0, 1);
      // let endDate = new Date(val, 11, 31);
      // this.weekList = DateUtil.estLabourWeek(beginDate,endDate)
      let str = this.selectedTec[this.selectedTec.length - 1]
      this.getGapList(this.selectedDep,str,val)
    },
    changeStartWeek(val) {
      
      let year, week, yearWeek
      if(val != null) {
        year = new Date(val).getFullYear()
        week = Moment(this.startWeek).utcOffset(480).format("WW") 
        yearWeek = `${year}-${week}`  
      } else {
        yearWeek = ''
      }
      this.weekList = DateUtil.estLabourWeek(this.startWeek,this.endWeek)
    },
    changeEndWeek(val) {
      
      let year, week, yearWeek
      if(val != null) {
        year = new Date(val).getFullYear()
        week = Moment(this.endWeek).utcOffset(480).format("WW") 
        yearWeek = `${year}-${week}`  
      } else {
        yearWeek = ''
      }
      this.weekList = DateUtil.estLabourWeek(this.startWeek,this.endWeek)
    }
  },
  watch: {
    techRadio(newValue) {
      this.selectedTec = newValue == 1 ? this.selectedTec1 : this.selectedTec2
      let str = this.selectedTec[this.selectedTec.length - 1]
      this.getGapList(this.selectedDep,str)
    },
    radio(newValue) {
      this.tableCurrent = 1
      this.tableSize = 10
      if(newValue == 1) {
        this.getPorjectList()
        this.selectedTec =  this.selectedTec1
        let str = this.selectedTec[this.selectedTec.length - 1]
        this.getGapList(this.selectedDep,str)
      }
      if(newValue == 2) {
        this.selectedTec =  this.selectedTec1
        let str = this.selectedTec[this.selectedTec.length - 1]
        this.getPorjectList(str)
        this.getGapList(this.selectedDep,str)
      }
      if(newValue == 3) {
        this.selectedTec =  this.selectedTec2
        let str = this.selectedTec[this.selectedTec.length - 1]
        this.getPorjectList(str)
        this.getGapList(this.selectedDep,str)
      }
    }
  }
  
}

</script>
<style lang="scss" scoped>
@import '../../assets/common/common.scss';

/deep/ .el-table th.gutter {
  display: table-cell !important;
}

/deep/ .el-dialog {
  background-color: #eeeeee;
}

/deep/ .el-divider__text {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  background-color: #e6a23c;
  padding: 6px 16px;
}

/deep/ .el-divider--horizontal {
  margin: 40px 0;
  height: 2px;
}
/deep/ .el-table td.cell-grey { 
  background-color:#909399 !important;
  color: #fff;
}
/deep/ .el-table td.cell-red { 
  background-color:#ff4949 !important;
  color: #fff;
}
/deep/ .el-table td.cell-yellow { 
  background-color:#ffba00 !important;
  color: #fff;
}
/deep/ .el-table td.cell-green { 
  background-color:#13ce66 !important;
  color: #fff;
}
/deep/ .el-table .cell {
  white-space: pre-line;
}
.icon-item {
  float: right;
  margin-top: 15px;
  cursor: pointer;
}
.icon-item img {
  width: 30px;
  height: 30px;
}
.hover-div {
  cursor: pointer;
}
.borders{
  border-bottom: 1px solid #dfe6ec;
}
.col-box {
  display: flex;
  margin-bottom: 10px;
  .col-span {
    min-width: 100px;
    line-height: 36px;
    margin-left: 20px;
  }
}
.el-table tbody .cell-grey { 
    background-color:#909399 !important;
    color: #fff;
}
.el-table tbody .cell-red { 
    background-color:#ff4949 !important;
    color: #fff;
}
.el-table tbody .cell-yellow { 
    background-color:#ffba00 !important;
    color: #fff;
}
.el-table tbody .cell-green { 
    background-color:#13ce66 !important;
    color: #fff;
}

#wrapper {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
}

.box {
  display: flex;

  div {
    margin: auto;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.toTop {
  position: fixed;
  bottom: 80px;
  right: 25px;
  z-index: 10;
}

.details {
  color: #1890ff;
  text-decoration: underline;
  cursor: pointer;
}

.choose {
  padding: 20px 0;

  .flex-box {
    display: flex;
    flex-wrap: nowrap;

    .flexEl {
      flex: 1;
      margin: auto;
    }

    .text-align {
      text-align: center;
    }

    .el {
      flex: 0 0 90%;
    }
  }

  .time {
    position: absolute;
    top: 20px;
    right: 41%;
    font-size: 14px;
    color: #606266;
  }

  .newReport {
    position: absolute;
    top: 20px;
    right: 20px;
  }
}

.border {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.primary {
  color: #409EFF;
  font-size: 30px;
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 400;
}

.bgColor {
  background: #fff;
}

.pad {
  padding: 0 20px;
  padding-top: 20px;
}

.marT {
  margin-top: 20px;
}

.btn-group {
  text-align: right;
}

.mar {
  margin: 0 20px;
  margin-top: 20px;
}

.table {
  padding-bottom: 10px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

</style>
